<!DOCTYPE html>
<html lang="en">

<head>
    @@include('../_include/head-common.html')
    <link rel="stylesheet" href="assets/css/all.min.css">
    <title> 首页｜形拓科技 </title>
</head>

<body>
    <!-- 顶部 header start -->
    @@include('../_include/header.html',{"Index":"active","SuccessCases":"notcurrent"})
    <!-- // header end -->
    <!-- 顶部kv -->
    <div class="top-banner banner-index J-scroll-group">
        <div class="wrap-box">
            <div class="inner-cont">
                <h3 class="ani-up-in2">构建<strong class="green">虚拟</strong>世界<br />帮助您在现实中<br />享受<strong
                        class="blue">元宇宙</strong>带来的<br />巨大红利</h3>
                <p class="en ani-up-in2 ani-delay-125">
                    Build virtual world<br /> help you in reality<br /> Enjoy what the Metaverse brings<br /> huge bonus
                </p>
            </div>
            <div class="lattice-group staggering-grid-1">
                <div class="grid">
                    <span class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                    <span class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                    <span class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                </div>
                <div class="grid shadow">
                    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                </div>
            </div>
        </div>
        <span class="lattice-1 abs"></span>
        <span class="lattice-2 abs"></span>
        <div class="video-bg" data-pc-url="assets/video/banner-index.mp4" data-mobile-url="assets/video/banner-index@2x.mp4"></div>
    </div>

    <!-- 工业元宇宙带来了什么？ -->
    <div class="wrap-box index-cont2 J-scroll-group">
        <h3 class="cont-til50 align-c">工业元宇宙 <br /> 能为您的企业带来什么？</h3>
        <div class="webp-group">
            <ul>
                <li>
                    <div class="thumb">
                        <img data-original="assets/images/1_nor.webp" src="assets/images/1_nor.png"  alt="利润增长最大化" class="thumb-nor lazy-img">
                        <img data-original="assets/images/1_hover.webp" src="assets/images/1_nor.png" alt="利润增长最大化" class="thumb-hover lazy-img" >
                    </div>
                    <h4>利润增长最大化</h4>
                    <span class="lattice-3 abs"></span>
                </li>
                <li>
                    <div class="thumb">
                        <img data-original="assets/images/2_hover.webp" src="assets/images/2_nor.png" class="thumb-hover lazy-img" alt="提高生产效率">
                        <img data-original="assets/images/2_nor.webp" src="assets/images/2_nor.png" class="thumb-nor lazy-img" alt="提高生产效率">
                    </div>
                    <h4>提高生产效率</h4>
                    <span class="lattice-3 abs"></span>
                </li>
                <li>
                    <div class="thumb">
                        <img data-original="assets/images/3_hover.webp" src="assets/images/3_nor.png" class="thumb-hover lazy-img" alt="降低管理成本">
                        <img data-original="assets/images/3_nor.webp" src="assets/images/3_nor.png" class="thumb-nor lazy-img" alt="降低管理成本">
                    </div>
                    <h4>降低管理成本</h4>
                    <span class="lattice-3 abs"></span>
                </li>
                <li>
                    <div class="thumb">
                        <img data-original="assets/images/4_hover.webp" src="assets/images/4_nor.png" class="thumb-hover lazy-img" alt="降低运营风险">
                        <img data-original="assets/images/4_nor.webp" src="assets/images/4_nor.png" class="thumb-nor lazy-img" alt="降低运营风险">
                    </div>
                    <h4>降低运营风险</h4>
                    <span class="lattice-3 abs"></span>
                </li>
            </ul>
        </div>
        <div class="lattice-group static w120 lattice-item1">
            <div class="grid">
                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            </div>
        </div>
        <div class="lattice-group lattice-item2 staggering-grid-1">
            <div class="grid">
                <span class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                <span class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                <span class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
            </div>
            <div class="grid shadow">
                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            </div>
        </div>
    </div>

    <!-- cont3 -->
    <div class="wrap-box index-cont3 J-scroll-group">
        <span class="lattice-4 abs"></span>
        <h3 class="cont-til50 align-c">创新技术让仿真更加真实</h3>
        <ul>
            <li>
                <div class="thumb">
                    <img src="assets/images/cont3_1.png" alt="机理模型">
                    <h4 class="name">机理模型</h4>
                </div>
                <p class="txt">追求更为真实的感官体验，提供设计建议及沉浸式感受</p>
            </li>
            <li>
                <div class="thumb">
                    <img src="assets/images/cont3_2.png" alt="图像技术">
                    <h4 class="name">图像技术</h4>
                </div>
                <p class="txt">领先的图像技术，有效缩短模型开发及修改周期；大场景模型轻量化，有效减少传输资源占用</p>
            </li>
            <li>
                <div class="thumb">
                    <img src="assets/images/cont3_3.png" alt="数字科学">
                    <h4 class="name">数字科学</h4>
                </div>
                <p class="txt">使用大数据、AI及区块链技术，挖掘数据并赋予其更多的价值，助力客户实现运营中的管理飞跃</p>
            </li>
        </ul>
        <div class="lattice-group staggering-grid-2 w144">
            <div class="grid">
                <span class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                <span class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                <span class="el"></span><span class="el"></span><span class="el"></span><span
                    class="el"></span>
            </div>
            <div class="grid shadow">
                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                <span></span><span></span><span></span><span></span>
            </div>
        </div>
        <span class="lattice-5 abs"></span>
    </div>


    <!-- 成功案例 start -->
    <div class="index-case-box">
        <!-- case1 -->
        <div class="index-case-item J-scroll-group">
            <div class="wrap-box">
                <div class="inner-content">
                    <h3 class="cont-til50">如何让救援者面对事故时，<br /> 立即做出合理、正确的反应？</h3>
                    <p class="txt">
                        为石油化工、海洋工业、煤矿开采、能源及危险品运输储备行业提供全套应急管理方案
                    </p>
                    <a href="success-cases.html#caseItem1" class="more-btn">
                        <span class="text">了解更多</span> <i class="dot"></i><i class="dot"></i><i class="dot"></i><i
                            class="dot"></i>
                        <p class="line-group"></p>
                    </a>
                    <div class="logo_group-box">
                        <img src="assets/images/C_logo.png">
                    </div>
                </div>
                <div class="lattice-group staggering-grid-1">
                    <div class="grid">
                        <span class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                        <span class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                        <span class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                    </div>
                    <div class="grid shadow">
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                    </div>
                </div>
                <span class="lattice-6 abs"></span>
            </div>
            <div class="tilt-mask"></div>
            <div class="kv-img-group">
                <div class="inner">
                    <div class="C_screen screen abs">
                        <img src="assets/images/C_screen.png">
                    </div>
                    <div class="C_words words abs">
                        <img src="assets/images/C_words.png">
                    </div>
                    <div class="C_person person abs">
                        <img src="assets/images/C_person.png">
                    </div>
                    <div class="bg">
                        <img src="assets/images/C_bg.jpg">
                    </div>
                </div>
            </div>  
            <div class="mobile-show-box ani-left-in">
                <a href="success-cases.html#caseItem1" class="more-btn">
                    <span class="text">了解更多</span> <i class="dot"></i><i class="dot"></i><i class="dot"></i><i
                        class="dot"></i>
                    <p class="line-group"></p>
                </a>  
            </div>      
        </div>

        <!-- cont5 -->
        <div class="index-case-item J-scroll-group">
            <div class="wrap-box">
                <div class="inner-content">
                    <h3 class="cont-til50"><span>如何让没有经验的在校学生，</span><span>沉浸体验知识在实际工况中的应用？</span></h3>
                    <p class="txt">
                        使用XR技术的数字教育，降低投入成本、提高操作安全、增加实践次数，在沉浸体验中激发学生创新能力，培养对于知识的兴趣
                    </p>
                    <a href="success-cases.html#caseItem2" class="more-btn">
                        <span class="text">了解更多</span> <i class="dot"></i><i class="dot"></i><i class="dot"></i><i
                            class="dot"></i>
                        <p class="line-group"></p>
                    </a>
                    <div class="logo_group-box">
                        <img src="assets/images/V_logo.png">
                    </div>
                </div>
                <div class="lattice-group abs staggering-grid-1">
                    <div class="grid">
                        <span class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                        <span class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                        <span class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                    </div>
                    <div class="grid shadow">
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                    </div>
                </div>
                <span class="lattice-6 abs"></span>
            </div>
            <div class="tilt-mask"></div>
            <div class="kv-img-group">
                <div class="inner">
                    <div class="V_screen screen abs">
                        <img src="assets/images/V_screen.png">
                    </div>
                    <div class="V_words words abs">
                        <img src="assets/images/V_words.png">
                    </div>
                    <div class="V_person person abs">
                        <img src="assets/images/V_person.png">
                    </div>
                    <div class="bg">
                        <img src="assets/images/V_bg.jpg">
                    </div>
                </div>
            </div> 
            <div class="mobile-show-box ani-left-in">
                <a href="success-cases.html#caseItem2" class="more-btn">
                    <span class="text">了解更多</span> <i class="dot"></i><i class="dot"></i><i class="dot"></i><i
                        class="dot"></i>
                    <p class="line-group"></p>
                </a>
            </div>   
            <div class="lattice-group abs staggering-grid-2 w144">
                <div class="grid">
                    <span class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                    <span class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                    <span class="el"></span><span class="el"></span><span class="el"></span><span
                        class="el"></span>
                </div>
                <div class="grid shadow">
                    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                    <span></span><span></span><span></span><span></span><span></span>
                </div>
            </div>          
        </div>

        <!-- cont6 -->
        <div class="index-case-item J-scroll-group">
            <div class="wrap-box">
                <div class="inner-content">
                    <h3 class="cont-til50">如何在面对瞬息万变的生产环境时，<br />做到运筹帷幄，处变不惊？</h3>
                    <p class="txt">
                        通过数字孪生技术链接实体、数字资产，展现了一个全数据驱动的工业元宇宙世界，提升了模型映射实体全生命周期的可靠性和效率；同时，将实物产品放在这种具有实时数据流的虚拟环境中，可有效利用AI技术对其进行数据分析。
                    </p>
                    <a href="success-cases.html#caseItem3" class="more-btn">
                        <span class="text">了解更多</span> <i class="dot"></i><i class="dot"></i><i class="dot"></i><i
                            class="dot"></i>
                        <p class="line-group"></p> 
                    </a>
                    <div class="logo_group-box">
                        <img src="assets/images/D_logo.png">
                    </div>
                </div>
                <span class="lattice-6 abs"></span>
                <div class="lattice-group abs staggering-grid-1">
                    <div class="grid">
                        <span class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                        <span class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                        <span class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span
                            class="el"></span><span class="el"></span><span class="el"></span><span class="el"></span>
                    </div>
                    <div class="grid shadow">
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                    </div>
                </div>
            </div>
            <div class="tilt-mask"></div>
            <div class="kv-img-group">
                <div class="inner">
                    <div class="D_screen screen abs">
                        <img src="assets/images/D_screen.png">
                    </div>
                    <div class="D_words words abs">
                        <img src="assets/images/D_words.png">
                    </div>
                    <div class="D_person person abs">
                        <img src="assets/images/D_person.png">
                    </div>
                    <div class="bg">
                        <img src="assets/images/D_bg.jpg">
                    </div>
                </div>
            </div>
            <div class="mobile-show-box ani-left-in">
                <a href="success-cases.html#caseItem3" class="more-btn">
                    <span class="text">了解更多</span> <i class="dot"></i><i class="dot"></i><i class="dot"></i><i
                        class="dot"></i>
                    <p class="line-group"></p> 
                </a>
            </div> 
        </div>
    </div>
    <!-- // 成功案例 end -->

    <!-- 底部模块 start -->
    @@include('../_include/footer.html')
    <!-- // 底部模块 end -->
    <script src="assets/third/jquery-2.1.4.min.js"></script>
    <script src="assets/third/gsap3.11.5/gsap.min.js"></script>
    <script src="assets/third/gsap3.11.5/ScrollTrigger.min.js"></script>
    <script src="assets/third/vanilla-tilt.min.js"></script>
    <!-- assets/third/vanilla-tilt.min.js -->
    <script src="assets/third/anime.min.js"></script>
    <script src="assets/third/jquery.lazyload.min.js"></script>
    <script src="assets/js/common.min.js"></script>
    <script src="assets/js/index.min.js"></script>

</body>

</html>